
import { NavBar, Icon, Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getUser, setPgc, removePgc, setAuthorAndPgc, getAuthorData, getAuthorVideoData } from '../action/action';
import { getCookie } from './../js/cookie';
import "../css/Author.scss"
@connect(
    (state) => {
        return {
            userData: state.my.userData,
            authorData: state.author.authorData,
            authorVideoData: state.author.authorVideoData,
        }
    }
)
export class Author extends React.Component {
    componentDidMount() {
        let { dispatch } = this.props;
        let id = this.props.match.params.id;
        dispatch(getAuthorData(id, (data) => {
        }));
        dispatch(getAuthorVideoData(id, (data) => {
        }));
        dispatch(getUser(getCookie("ky_uid"), (data) => { }));
    }
    setAttPgc(id, pgc) {
        let { dispatch } = this.props;
        if (getCookie("ky_uid")) {
            if (pgc.indexOf(id) == -1) {
                dispatch(setPgc(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
                dispatch(setAuthorAndPgc(id))
            } else {
                dispatch(removePgc(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
            }
        } else {
            Toast.info("未登录，请先登录");
        }
    }
    render() {
        let { userData, authorData, authorVideoData } = this.props;
        if (authorData && authorVideoData) {
            return (
                <div className="author-index">
                    <header>
                        <NavBar
                            mode="light"
                            icon={<Icon type="left" />}
                            onLeftClick={() => this.props.history.push(getCookie("ky_history_url"))}
                        >
                        </NavBar>
                    </header>
                    <main>
                        <div className="avatar">
                            <img src={authorData.pgcInfo.icon} />
                        </div>
                        <div className="userInfo">
                            <h3>{authorData.pgcInfo.name}</h3>
                            <p>{authorData.pgcInfo.description}</p>
                            <span onClick={() => { userData ? this.setAttPgc(authorData.pgcInfo.id, userData.result.uatt_pgc) : Toast.info("未登录，请先登录", 1) }}>{userData && userData.result.uatt_pgc.indexOf(authorData.pgcInfo.id) != -1 ? "已关注" : "+关注"}</span>
                        </div>
                        <div className="userWorks">
                            <div className="title">
                                <h3>{authorVideoData.itemList[0].data.header.title}</h3>
                            </div>
                            <div className="banner">
                                <div className="imgs">
                                    <div className="slide-box">
                                        {
                                            authorVideoData.itemList[0].data.itemList.map((item, index) => (
                                                <div className="slide-item" key={index}>
                                                    <Link to={"/video/" + item.data.id}><img src={item.data.cover.detail} /></Link>
                                                    <span>{item.data.duration / 60 < 10 ? "0" + parseInt(item.data.duration / 60) : parseInt(item.data.duration / 60)}:{item.data.duration % 60 < 10 ? "0" + item.data.duration % 60 : item.data.duration % 60}</span>
                                                    <div className="info" key={index}>
                                                        <div className="via">
                                                            <img src={item.data.author.icon} />
                                                        </div>
                                                        <div className="msg">
                                                            <h4>{item.data.title}</h4>
                                                            <p>{item.data.description}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            ))
                                        }
                                    </div>
                                </div>
                            </div>
                            <div className="title">
                                <h3>{authorVideoData.itemList[1].data.text}</h3>
                            </div>
                            <div className="popol">
                                <ul>
                                    <li>
                                        {
                                            authorVideoData.itemList.map((item, index) => {
                                                if (index >= 2 && index <= 6) {
                                                    return (
                                                    <div className="list-info cl" key={index}>
                                                        <div className="left-img">
                                                            <Link to={"/video/" + item.data.id}><img src={item.data.cover.detail} /></Link>
                                                            <span>{item.data.duration / 60 < 10 ? "0" + parseInt(item.data.duration / 60) : parseInt(item.data.duration / 60)}:{item.data.duration % 60 < 10 ? "0" + item.data.duration % 60 : item.data.duration % 60}</span>
                                                        </div>
                                                        <div className="left-info">
                                                            <h3 className="el">{item.data.title}</h3>
                                                            <div><span>#{item.data.category}</span></div>
                                                        </div>
                                                    </div>)
                                                }
                                            })
                                        }
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </main>
                </div>
            )
        } else {
            return (<div></div>)
        }
    }
}